<template>
  <!-- 设置密码 -->
  <div class="card-set-password" ref="aaa">
    <span class="title">请设置密码</span>
    <!-- <input class="set-password input" type="password"> -->
    <div class="input-box">
      <div class="input-concrol">
        <div class="input-text">
          <input name="set-password" class="input-text-input" type="text" />
          <Label class="input-text-label">密码</Label>
        </div>
      </div>
    </div>
    <!-- <span class="prompt ">*密码不得少于8个字符 且含有字母</span> -->
    <div class="btn-box">
      <button class="btn-set-password" @click="hide">取消</button>
      <button class="btn-set-password">确认</button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ForgotPassword',
  inject: ['changeForgot'],
  methods: {
    hide (e) {
      // 隐藏 忘记密码弹窗
      this.changeForgot(false)
    }
  },
  mounted () {
    document.onclick = function (e) {
      // vue 点击其他地方隐藏dom
      if (this.$refs.aaa) {
        // 这句话是说如果我们点击到了class为keywordContainer以外的区域
        if (
          !this.$refs.aaa.contains(e.target) &&
          e.target.innerText !== '忘记密码'
        ) {
          this.changeForgot(false)
          this.$destroy('ForgotPassword')
        }
      }
    }.bind(this)
  },
  destroyed () {
    document.onclick = null
  }
}
</script>
